<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 400px;height: 300px;border: solid 1px black;margin: 0 auto;}
        .box ul{margin: 0;padding: 0;list-style: none;display: flex;height: 40px;line-height: 40px;text-align: center;border-bottom: solid 1px black}
        .box li{flex: 1;border-left:solid 1px black;border-right: solid 1px black;cursor: pointer;}
        .box li:active{background: #99f}
        .cont div{height: 260px;display: none;}
        .cont .cont1{background: #66f;display: block;}
        .cont .cont2{background: #6f6;}
        .cont .cont3{background: #f66;}
        .cont .cont4{background: #ff6;}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li style="background:red">热门推荐</li>
            <li>限时抢购</li>
            <li>积分兑换</li>
            <li>满减返现</li>
        </ul>
        <div class="cont">
            <div class="cont1">
                一堆各种复杂的页面结构1
            </div>
            <div class="cont2">
                一堆各种复杂的页面结构2
            </div>
            <div class="cont3">
                一堆各种复杂的页面结构3
            </div>
            <div class="cont4">
                一堆各种复杂的页面结构4
            </div>
        </div>
    </div>
</body>
<script>
    // 获取元素
    var ali=document.querySelectorAll(".box ul li");
    var acont=document.querySelectorAll(".box .cont>div")
    // 绑定索引
    for(i=0;i<ali.length;i++){
        ali[i].a=i;
    }

    // 要清除的上一个元素的索引
    var prev=0;
    for(i=0;i<ali.length;i++){
        // console.log(ali.length)
        ali[i].onmouseover=function(){
            ali[prev].style.background="none";
            ali[this.a].style.background="red";
            acont[prev].style.display="none";
            acont[this.a].style.display="block";
            prev=this.a
        }
    }
</script>
</html>